<template>
  <div class="json" :class="{root: isRoot}">
    <div class="title">
      <label v-if="title">{{ title }}</label>
    </div>

    <div class="row" :class="$model.isList ? 'row-list' : ''" v-if="!isRoot">

      <el-button v-if="$model.items.length" text
                 :icon="$data.expand ? CaretRight: CaretBottom "
                 class="expand"
                 @click="$data.expand = !$data.expand"></el-button>

      <div>{{ $model.key }} {{ $model.remark.slice(0, 15) }}{{ $model.remark.length > 15 ? "..." : "" }} ：</div>
      <el-input v-if="!$model.items.length" style="margin-left: 8px;" :placeholder="$model.key" class="key" chk="*" v-model="$model.value" ></el-input>
    </div>

    <div :class="{sub: !isRoot}" v-if="!$data.expand && $model.items.length">
      <api-json v-for="(item,index) in $model.items" :key="item.key"
                v-model="$model.items[index]" :parent="$model" :edit-value="$props.editValue"></api-json>
    </div>
  </div>
</template>
<script setup>
/**
 * Created by CodeGenerator  at 2022-09-07 13:54:56
 */
import '../styles/cmn.scss'
import apiJson from "./api-json-parameter-edit-value.vue"
import {Setting, CirclePlus, Plus, Remove, CaretBottom, CaretRight} from '@element-plus/icons-vue'



defineOptions({
  name: "api-json",
  inheritAttrs: true,
});


//定义data
const $data = reactive({
  expand: false,
  jsonDefine: "",
  dlg_show: false
});


//定义属性
const $props = defineProps({
  title: {
    type: String, default() {
      return "";
    }
  },
  parent: {
    type: Object, default() {
      return null;
    }
  },
  fixObject: {
    type: Boolean, default() {
      return false;
    }
  },
  editValue: {
    type: Boolean, default: false
  }
});

const $model = defineModel({type: Object});

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);


const update_model = () =>{
  $emit("update:modelValue", $model.value);
}

const isRoot = $computed(function () {
  return $props.parent == null;
});

onMounted(() => {
})

</script>